<script lang="ts" setup>
	import Router from "../router/index";
	import { ref } from "vue";
  import { storeToRefs } from "pinia";
	import FuncShowConfirmBox from "@/utils/confirmBox";
	import { useRouter, useRoute } from "vue-router";
	import { useUserStore,useLoadStore } from "@/stores";
	import logoView from "@/components/views/logo/logoView.vue";
  import { ElMessage } from "element-plus";
	//-----
	const userStore = useUserStore();
  const {isLoading:isGetting}=storeToRefs(useLoadStore());
	//-----
	const router = useRouter();
	const route = useRoute();
	const allRoute = ref(Router.options.routes[1]?.children || []);
	//--
	const isCollapse = ref<boolean>(false);
	const handleCollapse = () : void => {
		isCollapse.value = !isCollapse.value;
	};
	//--
	const logoutCallBack = () => {
		router.replace({ path: "/login" })
		userStore.clearStore()
		ElMessage.success('退出登录成功')
	}
	const logOut = () => {
		FuncShowConfirmBox('确定退出登录吗？', ()=>logoutCallBack())
	}
</script>
<template>
	<div class="commom-layout">
		<el-container>
			<el-aside :width="isCollapse ? '64px' : '240px'" style="transition: all 0.3s">
				<logoView v-if="!isCollapse"></logoView>
				<el-menu router :default-active="route.name" class="el-menu-vertical-demo" :collapse="isCollapse"
					style="padding-top: 30px">
					<el-menu-item v-for="item in allRoute" :index="item.path" :key="item.path">
						<el-icon>
							<component :is="item.meta!.icon"></component>
						</el-icon>
						<span>{{ item.meta!.title}}</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header>
					<div style="display: flex;;align-items: center;">
						<div class="bthHandleCollapse">
							<el-icon :size="38" @click="handleCollapse" v-show="!isCollapse">
								<ArrowLeftBold />
							</el-icon>
							<el-icon :size="38" @click="handleCollapse" v-show="isCollapse">
								<ArrowRightBold />
							</el-icon>
						</div>
					</div>
					<el-dropdown placement="bottom">
						<div class="userInfo">
							<div class='avatar'>
								<img :src="userStore.userInfo?.avatarUrl"></img>
							</div>
							<div class="userName">{{ userStore.userInfo?.username }}</div>
						</div>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</el-header>
				<el-main v-loading="isGetting">
					<RouterView />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<style lang="scss" scoped>
	.commom-layout {
		background-color: #fff;

		.el-header {
			background-color: #fff;
			height: 8vh;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2px solid #e6e6e6;

			.el-breadcrumb {
				height: 100%;
				width: 60%;
				overflow: scroll;
				display: flex;
				align-items: center;
				font-size: 15px;
			}

			.bthHandleCollapse {
				height: 100%;
				width: 2.5vw;
				display: flex;
				align-items: center;
			}

			.userInfo {
				display: flex;
				align-items: center;
				margin-left: 20px;

				.avatar {
					width: 45px;
					height: 45px;
					border-radius: 50%;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.userName {
					margin-left: 20px;
					font-size: 15px;
					font-weight: 550;
				}
			}
		}

		.el-aside {
			transition: width 0.5s;
			background-color: #506093;
			height: 100vh;

			.el-menu {
				padding-top: 0 !important;

				.el-menu-item {
					color: #fff;
					font-size: 14px;

					&:hover {
						background-color: #fff;
						color: black;
					}
				}

				.is-active {
					background-color: #fff;
					color: black;
				}
			}

			&::-webkit-scrollbar {
				display: none;
			}

			:deep(.el-menu) {
				background-color: transparent;
				border: none;
			}
		}

		.el-main {
			height: 92vh;
			padding: 0;
			overflow: auto;
			background-color: #f1f2f6;

			.container {
				min-height: 98%;
				min-width: 98%;
				padding: 10px;
			}
		}
	}
</style>
